#面グラフ

両方ラインとレーダーチャートはfillデータセット オブジェクトのオプション。2 つのデータセット間、またはデータセットと境界 (スケールなど) の間にスペースを作成するために使用できます。originstart,またend(見る充填モード)。

ノート

この機能は、fillerプラグイン (新しいウィンドウが開きます)

#充填モード

モード タイプ 価値観
絶対データセットインデックス number 123、 ...
相対データセットインデックス string '-1''-2''+1'、 ...
境界 string 'start''end''origin'
無効1 boolean false
以下の積み上げ値 string 'stack'
軸の値 object { value: number; }
形状(線の内側を塗りつぶす) string 'shape'

1下位互換性のために、fill: trueと同等ですfill: 'origin'

#

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},      // 0: fill to 'origin'
            {fill: '+2'},          // 1: fill to dataset 3
            {fill: 1},             // 2: fill to dataset 1
            {fill: false},         // 3: no fill
            {fill: '-2'},          // 4: fill to dataset 2
            {fill: {value: 25}}    // 5: fill to axis value 25
        ]
    }
});

あるデータセットから別のデータセットに塗りつぶすときに複数の色をサポートする必要がある場合は、次のオプションを使用してオブジェクトを指定できます。

パラム タイプ 説明
target numberstringbooleanobject 受け入れられる値は充填モードの値と同じであるため、絶対および相対のデータセット インデックスや境界を使用できます。
above Color 色が設定されていない場合、デフォルトの色はグラフの背景色になります。
below Color 上記と同じです。

#複数の色の例

new Chart(ctx, {
    data: {
        datasets: [
            {
              fill: {
                target: 'origin',
                above: 'rgb(255, 0, 0)',   // Area will be red above the origin
                below: 'rgb(0, 0, 255)'    // And blue below the origin
              }
            }
        ]
    }
});

#構成

名前空間:options.plugins.filler

オプション タイプ デフォルト 説明
drawTime string beforeDatasetDraw フィラー描画時間。サポートされている値:'beforeDraw''beforeDatasetDraw''beforeDatasetsDraw'
propagate boolean true ターゲットが非表示の場合の塗りつぶしの伝播。

#伝播する

propagateかかりますboolean値 (デフォルト:true)。

もしもtrue、塗りつぶし領域は、によって定義された可視ターゲットまで再帰的に拡張されます。fill非表示のデータセット ターゲットの値:

#伝播を使用した例

new Chart(ctx, {
    data: {
        datasets: [
            {fill: 'origin'},   // 0: fill to 'origin'
            {fill: '-1'},       // 1: fill to dataset 0
            {fill: 1},          // 2: fill to dataset 1
            {fill: false},      // 3: no fill
            {fill: '-2'}        // 4: fill to dataset 2
        ]
    },
    options: {
        plugins: {
            filler: {
                propagate: true
            }
        }
    }
});

propagate: true: - データセット 2 が非表示の場合、データセット 4 がデータセット 1 に埋め込まれます。 - データセット 2 と 1 が非表示の場合、データセット 4 が埋め込まれます。'origin'

propagate: false: - データセット 2 および/または 4 が非表示の場合、データセット 4 は埋められません

最終更新: 2023 年 5 月 25 日、午後 1 時 12 分 28 秒